<template>
    <view>
        <view class="u-flex u-flex-wrap" style="line-height: 60rpx;color: #333333;font-size: 24rpx;"
            v-if="list && list.length&&title">
            <text style="width: 200rpx;">{{title}}</text>
            <view class="u-flex">
                <image :src="value" v-for="(value,index) in list" :key="index" @click="previewImg(value)"
                    style="width: 100rpx;height: 100rpx;"></image>
            </view>
        </view>
        <block v-else>
            <view class="u-flex">
                <image :src="value" v-for="(value,index) in list" :key="index" @click="previewImg(value)"
                    style="width: 100%"></image>
            </view>
        </block>
    </view>
</template>

<script>
    /**
     * 图片预览
     * @description 此组件一般用于图片预览。
     * @tutorial https://www.dfer.site
     * @property {Array} uploadApi 图片上传接口地址
     * @event {Function} resultHandler 上传接口返回数据之后触发
     * @example <dfer-img :list="list.img" title="相关图片" :trace="true" />
     */
    export default {
        name: "dfer-img",
        data() {
            return {};
        },
        props: {
            trace: {
                type: Boolean,
                default () {
                    return false
                }
            },
            title: {
                type: String,
                default: ""
            },
            list: {
                type: Array,
                default: []
            }
        },
        watch: {},
        created() {},
        methods: {
            previewImg(url) {
                // 预览一张图片
                let urls = [url];
                uni.previewImage({
                    current: 0,
                    urls: urls
                })
            }
        }
    }
</script>

<style lang="scss">
    .upload-tips {
        font-size: 26rpx;
        color: #999999;
        margin-bottom: 16rpx;
    }

    .upload-container {
        margin-top: 10rpx;
    }

    .image-list {
        margin-top: 10rpx;
    }

    .image-item {
        position: relative;
        margin-right: 20rpx;
        margin-bottom: 20rpx;
    }

    .upload-image {
        width: 160rpx;
        height: 160rpx;
        border-radius: 12rpx;
    }

    .delete-btn {
        position: absolute;
        top: -16rpx;
        right: -16rpx;
        width: 40rpx;
        height: 40rpx;
        background-color: #ff3b30;
        border-radius: 50%;
        box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.2);
    }

    .delete-icon {
        font-size: 28rpx;
        color: #ffffff;
        font-weight: bold;
    }

    .upload-btn {
        width: 160rpx;
        height: 160rpx;
        border: 2rpx dashed #d9d9d9;
        border-radius: 12rpx;
        background-color: #fafafa;
        transition: all 0.2s;
    }

    .upload-btn:active {
        border-color: #1a6cdf;
        background-color: #f0f7ff;
    }

    .upload-icon-container {
        text-align: center;
    }

    .upload-icon {
        font-size: 48rpx;
        color: #999999;
        display: block;
    }

    .upload-text {
        font-size: 24rpx;
        color: #999999;
        margin-top: 8rpx;
    }
</style>